<!--
  ~ Copyright(c) 2016-2017 IBM, Red Hat, and others.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="container p-a-1 rounded" style="background: white">
    <div class="row">
        <div class="col-xs">
            <h4>{{title}}
                <small class="text-muted">Search for your favourite speaker</small>
            </h4>
        </div>
        <div class="col-xs">
            <input #speakerSearch type="text" class="form-control" placeholder="[Speaker name]"
                   (keyup)="onSearch(speakerSearch.value)">
        </div>
    </div>

    <div class="row p-a-1">
        <div class="col-xs-3">
            <ul class="list-group" style="overflow: scroll; overflow-y: auto; overflow-x: hidden; min-height: 520px; max-height: 520px">
                <li class="list-group-item list-group-item-action milky" style="cursor:hand;cursor:pointer"
                    *ngFor="let speaker of (speakers | speakerFilter: search)"
                    [class.selected]="speaker === selectedSpeaker"
                    (click)="onSelect(speaker)">
                    {{speaker.nameFirst}} {{speaker.nameLast}}
                </li>
            </ul>
        </div>
        <div class="col-xs-9 p-a-1">
            <speaker [speaker]="selectedSpeaker"></speaker>
        </div>
    </div>
</div>
